<template>
    <button class="cu-btn"
    @click="handlerClick"
    :disabled="disabled"
    :class="[
            roundClass,
            size,
            bgClass,
            shadowClass,
            lineClass,
            blockClass
        ]">
            <slot></slot>
        </button>
</template>
<script>
import {COLOR_ENUMS,BUTTON_size_ENUMS} from "./utils";
export default {
    props:{
        round:{
            type:Boolean,
            default:false
        },
        size:{
            type:String,
            default:""
        },
        bg:{
            type:Boolean,
            default:false,
        },
        color:{
            type:String,
            default:"red",
            validator:function(color){
                return COLOR_ENUMS.some(c=>c === color);
            }
        },
        shadow:{
            type:Boolean,
            default:false
        },
        line:{
            type:Boolean,
            default:false
        },
        bigLine:{
            type:Boolean,
            default:false
        },
        disabled:{
            type:Boolean,
            default:false
        },
        block:{
            type:Boolean,
            default:false
        }
    },
    computed:{
        roundClass(){
            return this.round?"round":"";
        },
        lineClass(){
            let className = "";
            if(this.line){
                className = "line";
                if(this.bigLine){
                    className += "s";
                }
                if(this.color !== ""){
                    className += `-${this.color}`
                }
            }
            return className;
        },
        bgClass(){
            let className = "";
            if(this.bg && this.color){
                className = `bg-${this.color}`;
            }
            return className;
        },
        shadowClass(){
            return this.shadow?"shadow":"";
        },
        blockClass(){
            return this.block?"block":"";
        }
    },
    methods:{
        handlerClick(){
            this.$emit("click")
        }
    }
}
</script>